<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
<link rel="stylesheet" href="/styles/jquery-ui.css" >
<link rel="stylesheet" href="/styles/blueimp-gallery.css">
<link rel="stylesheet" href="/js/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/js/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="/styles/landingPages.css">
<script src="/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-table/dist/bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="/js/bootstrap/dist/js/bootstrapValidator.js"></script>
    <script type="text/javascript">
        localPath="page"
    </script>
</head>
<body>

<!--一添加提示弹窗开始-->
<div id="addModal" class="modal fade">
</div><!-- /.modal -->

<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin have-btn-title">表单管理</h3>
  <a href="/landing_pages/list" type="button" class="btn btn-sm btn-primary ng-click-active pull-right add-advert-btn-style">
    落地页列表
  </a>
  <a href="javascript:add()" type="button" class="btn btn-sm btn-primary ng-click-active pull-right add-advert-btn-style  add_forms_btn"
     <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>
  >
    新增表单
  </a>
</div>
<div class="p-md">
        <table id="formsTable" class="table table-bordered table-hover bg-white">
        </table>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var $table = $('#formsTable');
        /*$clearn = $('#clearn');
         $addButton = $('#addButton');
         $addModal = $('#addModal');
         $doAddButton = $('#doAddButton');*/
        $table.bootstrapTable({
            url : '/ajax/front/form/pages',//后台调用的链接
            //height: getHeight(),//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            width : 10,
            method : 'get', //请求方式（*）
            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, //是否显示分页（*）
            sortable : true, //是否启用排序
            sortName : 'createdAt', //排序名称 默认没有
            showColumns : false, //开启显示列选择
            minimumCountColumns : '2', //最少要显示几列
            sortOrder : "desc", //默认排序方式
            sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, //初始化加载第一页，默认第一页
            pageSize : 15, //初始每页的记录行数（*）
            pageList : [15, 25, 50], //可供选择的每页的行数（*）
            clickToSelect : true, //是否启用点击选中行 默认不启用
            uniqueId : "uid", //每一行的唯一标识，一般为主键列
            //search : true, //打开搜索框
            showPaginationSwitch : false, //分组件显示隐藏 默认为true
            //paginationDetailHAlign:'',
            paginationPreText : '上一页',
            paginationNextText : '下一页',
            //formatShowingRows:'Showing %s to %s of %s rows',
            onLoadSuccess : function(data) {
                //如果当前也没有数据就返回第一页
                if (data.rows.length <= 0 && data.offset != 1) {
                    $table.bootstrapTable("selectPage", 1);
                }
            },
            columns : [[
                {
                    title : '序号',
                    field : 'id',
                    // formatter : index,
                    visible : true,
                    formatter : index
                }, {
                    title : '落地页名称',
                    field : 'name',
                    sortable : true
                },{
                    field : 'createdAt',
                    title : '创建时间',
                    sortable : true,
                    formatter : formatterTime
                }, {
                    field : 'state',
                    title : '操作',
                    sortable : false,
                    formatter : view
                }]]
        });
        //时间格式化
        function formatterTime(value, row, index) {
            return formatDate(new Date(value))
        }
        var formatDate= function formatDateTime(date){
            var y = date.getFullYear();  //年
            var m = date.getMonth() + 1;  //月
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();  //日
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();  //时
            var minute = date.getMinutes(); //分
            minute = minute < 10 ? ('0' + minute) : minute;
            var seconds=date.getSeconds(); //秒
            seconds=seconds<10?('0'+seconds):seconds;
            return y + '-' + m + '-' + d+' '+h+':'+minute+':'+seconds;
        };

        //序号
        function index(value, row, index) {
            return [index + 1].join('')
        }
//自定义方法
        function view(value, row, index) {
            console.log(row)
            var data="";
            if(operationType==2&&isFromBackend!=true) {
                data += '<span class="" ><a href="/front/forms/' + row.id + '/edit">编辑<i class="m-l-sm"></i></a></span>';
                data += '<span class="delete-action-btn" ><a href="javascript:deleteForms(' + row.id + ')">删除<i class="m-l-sm"></i></a></span>';
                return [data].join('')
            }
        }

    })
    function deleteForms(id){
        $.ajax({
            url: "/ajax/front/forms/"+id+"/delete",
            type:"POST",
            dataType: 'json',
            success: function (data) {
                if("success"==data) {
                    showMsg("success","表单删除成功！");
                    setTimeout("$('#formsTable').bootstrapTable('refresh')", 1000);
                }else{
                    bootbox.dialog({
                        title: "删除表单提示",
                        message: "表单在使用中，无法删除。",
                        buttons: {
                            "success": {
                                "label": "<i class='icon-ok'></i> 确定",
                                "className": "btn-sm btn-primary",
                                "callback": function () {
                                    return;
                                }
                            }
                        }
                    })
                }
            }
        });
    }
    function add(){
        $.ajax({
            url: "/ajax/front/forms/add",
            type:"GET",
            dataType: 'HTML',
            success: function (data) {
                $("#addModal").html(data);
                $("#addModal").modal("show");

            }
        });

    }
</script>
</body>
</html>